'use strict';

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    InteractionManager,
    NativeModules,
    ListView,
    TouchableHighlight,
    Modal,
    Linking,
    TextInput,
    Alert,
    TouchableOpacity,
} from 'react-native';
import styles from './styles';
import {connect} from 'react-redux'
import Communications from 'react-native-communications';

import {ImageUploadPlugin} from '../../utils/NativeUtil'

import UserEdit from '../my'
import NoticeEdit from '../my/noticeEdit'
import Shop from '../shop/shop';
import {getUserDetail,clearUser} from '../my/actions';
import {getShopInfo} from './actions';

import {LoginOutPlugin, AppNativeManager, editRichContent} from '../../utils/NativeUtil'

import NaviUtil from '../../utils/NaviUtil'

import Message from '../message/MessageMain';
import {naviPush, gotoView} from '../../navigatorApp/actions';
import ShopState from './shopState'

import {updateStory} from '../shop/actions'
import {clearToken} from './actions';

class TabMy extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {dispatch} = this.props;
        const token = this.props.userToken;
        InteractionManager.runAfterInteractions(() => {
            this.props.getUserDetail(token);
        });
    }

    showShopImg = () => {
        if (this.isCanUse()) {
            const shopname = this.props.shopInfo.shopname;
            AppNativeManager.callNative('qrscan', {shopname: shopname});
        }
    };

    tomessage = () => {
        this.props.naviPush("message")
    };

    loginOut = () => {
        var self = this;
        Alert.alert('提示',
        "确认注销",
        [
            {text: '取消', onPress: () => {}},
            {text: '确定', onPress: () => {
                LoginOutPlugin(function () {
                    self.props.clearToken();
                    self.props.clearUser();
                    self.props.gotoView("login")
                });
            }},
        ]);
    };

    editUser = () => {
        this.props.naviPush("userEdit")
    };

    editNotice = () => {
        if (this.isCanUse()) {
            const nextRoute = {
                component: NoticeEdit,
                title: "公告编辑"
            };
            this.props.navi.push(nextRoute);
        }
    };

    callPhone = () => {
        Communications.phonecall('4001009112', false);
    };

    isCanUse = () => {
        if (this.props.shopState == 2) {
            return true;
        } else if (this.props.shopState == 3) {
            Alert.alert('提示',
                "您的店铺正在审核中",
                [
                    {
                        text: '了解', onPress: () => {
                    }
                    },
                ]);
        } else {
            let tsMessage = "";
            let buttonTitle = "";
            if (this.props.shopState == 0) {
                tsMessage = "请先创建店铺";
                buttonTitle = "立即创建";
            } else if (this.props.shopState == 1) {
                tsMessage = "请先完善店铺";
                buttonTitle = "立即完善";
            }
            Alert.alert('提示',
                tsMessage,
                [
                    {
                        text: '以后再说', onPress: () => {
                    }
                    },
                    {
                        text: buttonTitle, onPress: () => {
                        this.props.naviPush("shopComplete")
                    }
                    }
                ]);
            return false;
        }
    }

    toShopuserManager() {
        const nextRoute = {
            component: shopuser,
            title: '店员管理',
        };
        this.props.navi.push(nextRoute);
    }

    render() {

        let portrait = require('../../image/yi.png')
        if (this.props.user.portrait == undefined) {
            portrait = require('../../image/yi.png');
        } else if (this.props.user.portrait == "") {
            portrait = require('../../image/yi.png');
        } else {
            portrait = {
                uri:this.props.user.portrait
            }
        }

        const shopname = this.props.shopInfo.shopname;
        const notice = this.props.shopInfo.notice;

        return <ScrollView>
            <ShopState/>
            <TouchableOpacity
                style={styles.my_head}
                onPress={() => {
                    this.editUser()
                }}>
                <View style={styles.my_head}>
                    <Image style={styles.my_head_img} source={portrait}/>
                    <View style={{marginLeft: 10}}>
                        <Text style={styles.my_head_text}>{this.props.user.username}</Text>
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}>
                            <Text style={{color: "white"}}>编辑个人信息</Text>
                            <Image
                                style={{
                                    width: 15,
                                    height: 10,
                                    marginLeft: 5
                                }}
                                source={require('../../image/img_right_grey.png')}/>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
            {/* <View style={styles.my_row}>
             <TouchableHighlight
             underlayColor='#eee'
             onPress={() => {
             this.toShopuserManager();
             }}>
             <View style={styles.my_item}>
             <View
             style={{
             flexDirection: 'row',
             alignItems: 'center'
             }}>
             <Image
             resizeMode="contain"
             style={{
             width: 25,
             height: 25,
             marginLeft: 5
             }}
             source={require('../../image/message.png')}/>
             <Text style={styles.my_item_text}>店员管理</Text>
             </View>
             <Image
             style={{
             width: 20,
             height: 15
             }}
             source={require('../../image/img_right_grey.png')}/>
             </View>
             </TouchableHighlight>
             </View> */}
            <View style={[styles.my_row, {marginTop: 0}]}>
                <TouchableHighlight
                    underlayColor='#eee'
                    onPress={() => {
                        if (this.isCanUse()) {
                            this.props.naviPush("shop")
                        }
                    }}>
                    <View style={styles.my_item}>
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}>
                            <Image
                                resizeMode="contain"
                                style={{
                                    width: 25,
                                    height: 25,
                                    marginLeft: 5
                                }}
                                source={require('../../image/shopBase.png')}/>
                            <Text style={styles.my_item_text}>店铺基本信息</Text>
                        </View>
                        <Image
                            style={{
                                width: 20,
                                height: 15
                            }}
                            source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableHighlight>
                <View
                    style={{
                        height: 1,
                        marginLeft: 10,
                        backgroundColor: '#eee'
                    }}/>
                <TouchableHighlight
                    underlayColor='#eee'
                    onPress={() => {
                        if (this.isCanUse()) {

                            let params = {
                                token: this.props.token,
                                story: this.props.shopInfo.story,
                            }

                            const self = this;

                            editRichContent({
                                title: "店铺详情",
                                filetag: "shop",
                                value: this.props.shopInfo.story
                            }, (value) => {
                                self.setState({story: value.value});
                                params.story = value.value;
                                updateStory(params, () => {
                                    self.props.getShopInfo();
                                })

                            })
                        }

                    }}>
                    <View style={styles.my_item}>
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}>
                            <Image
                                resizeMode="contain"
                                style={{
                                    width: 25,
                                    height: 25,
                                    marginLeft: 5
                                }}
                                source={require('../../image/shopDetail.png')}/>
                            <Text style={styles.my_item_text}>店铺详情</Text>
                        </View>
                        <Image
                            style={{
                                width: 20,
                                height: 15
                            }}
                            source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableHighlight>
            </View>
            <View style={styles.my_row}>
                <TouchableHighlight
                    underlayColor='#eee'
                    onPress={() => {
                        this.tomessage()
                    }}>
                    <View style={styles.my_item}>
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}>
                            <Image
                                resizeMode="contain"
                                style={{
                                    width: 25,
                                    height: 25,
                                    marginLeft: 5
                                }}
                                source={require('../../image/message.png')}/>
                            <Text style={styles.my_item_text}>我的消息</Text>
                        </View>
                        <Image
                            style={{
                                width: 20,
                                height: 15
                            }}
                            source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableHighlight>
            </View>
            <View style={styles.my_row}>
                <TouchableHighlight
                    underlayColor='#eee'
                    onPress={() => {
                        this.callPhone()
                    }}>
                    <View style={styles.my_item}>
                        <View
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}>
                            <Image
                                resizeMode="contain"
                                style={{
                                    width: 25,
                                    height: 25,
                                    marginLeft: 5
                                }}
                                source={require('../../image/call.png')}/>
                            <Text style={styles.my_item_text}>联系客服</Text>
                        </View>
                        <Image
                            style={{
                                width: 20,
                                height: 15
                            }}
                            source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableHighlight>
            </View>
            <TouchableHighlight
                underlayColor="#fde286"
                style={styles.logoutButton}
                onPress={() => {
                    this.loginOut()
                }}>
                <Text style={styles.logoutText}>注 销</Text>
            </TouchableHighlight>
            <Modal
                transparent={true}
                visible={this.props.shopImgModalVisible}
                onRequestClose={() => this.showShopImg()}>
                <TouchableHighlight
                    underlayColor='rgba(255,255,255,0)'
                    style={{
                        flex: 1
                    }}
                    onPress={() => this.showShopImg()}>
                    <View
                        style={{
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            flex: 1,
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                        <View
                            style={{
                                borderRadius: 5,
                                flexDirection: 'column',
                                backgroundColor: 'white',
                                alignItems: 'center',
                                justifyContent: 'center',
                                width: 220,
                                height: 320
                            }}>
                            <Text
                                style={{
                                    marginTop: 20,
                                    fontStyle: 'italic',
                                    fontSize: 18,
                                    marginBottom: 20
                                }}>{shopname}</Text>
                        </View>
                    </View>
                </TouchableHighlight>
            </Modal>
        </ScrollView>
    }
}

const mapStateToProps = state => ({
    shopState: state.mainmodel.shopState,
    token: state.mainmodel.token,
    user: state.user.user,
    userToken :state.mainmodel.userToken,
    shopInfo: state.mainmodel.shopInfo,
    shopImgModalVisible: state.mainmodel.shopImgModalVisible,
});

const mapDispatchToProps = dispatch => ({
    getUserDetail: (token) => {
        dispatch(getUserDetail(token))
    },
    getShopInfo: () => {
        dispatch(getShopInfo())
    },
    naviPush: (routeName) => {
        dispatch(naviPush(routeName))
    },
    gotoView: (value) => {
        dispatch(gotoView(value))
    },
    clearToken:() => {
        dispatch(clearToken())
    },
    clearUser: () => {
        dispatch(clearUser())
    }
});

export default connect(mapStateToProps, mapDispatchToProps,)(TabMy);